const browserSync = require("browser-sync");
const gulp = require("gulp");
const babel = require("gulp-babel");
const fileinclude = require("gulp-file-include");
const sass = require("gulp-sass")(require("sass"))

gulp.task("html", async () => {
    gulp.src(["./src/*.html"])
    .pipe(fileinclude({
        prefix : "@@",
        basepath : "@file"
    }))
    .pipe(gulp.dest("./dist"))
});

gulp.task("js", async () => {
    gulp.src(["./src/javascripts/*.js"])
    .pipe(babel({
        presets: ["@babel/env"]
    }))
    .pipe(gulp.dest("./dist/javascripts"))
})

gulp.task("scss", async () => {
    gulp.src(["./src/scss/*.scss"])
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./dist/css"))
})

gulp.task("watch", async () => {
    gulp.watch(["./src/index.html"], gulp.series("html", browserSyncReload));
    gulp.watch(["./src/javascripts/*.js"], gulp.series("js"));
    gulp.watch(["./src/scss/*.scss"], gulp.series("scss"));
})

gulp.task("browserSync", async () => {
    browserSync.init({
        server: {
            baseDir : "./"
        },
        port : 3000
    })
})
function browserSyncReload(done){
    browserSync.reload();
    done();
}

gulp.task("default", gulp.series("html","js","scss","watch","browserSync"))